import React, { Component, Fragment} from 'react';
import 'antd/dist/antd.css'; 
import { message, Input,Button,Form,Icon, Modal} from 'antd';
import { Redirect } from 'react-router-dom';
import '../css/Login.css';

const { confirm } = Modal;
class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            inputValue1:'',
            pwd:'',
            RedirectModify: false,
            RedirectTabs: false
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this)
    }
    render() {
        if(this.state.RedirectModify===true){
             return (<Redirect  to={{pathname:'/Modify',username:this.state.inputValue1}}/>)           
        }
        else if(this.state.RedirectTabs===true){
            return (<Redirect  to="/Person"/>)  
        }
        else{
        return(
            <Fragment>
                <div className="body">
                    <img src="https://cloud.eisoo.com/v0/oem/LoginLogoZH" alt="logo"/>
                    <div className="Form">
                        <h2>登录/注册</h2>
                        <Form className="login-form"> 
                            <Form.Item >
                                <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="Username"
                                value={this.state.inputValue1}
                                onChange={this.handleNameChange}
                                />
                            </Form.Item>
                            <Form.Item>
                                <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="Password"
                                onChange={this.handlePasswordChange}
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" className="btn" onClick={this.handleClick}>
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>               
                    </div>  
                </div>
             
            </Fragment>
        )
        }
    }
    
    handleClick(){
        const inputValue1 = this.state.inputValue1;
        let This = this;
        const pwd = this.state.pwd;
        if(inputValue1===""){
            message.warning('请输入用户名');
        }
        if(inputValue1!==""&&pwd===""){
            message.warning('请输入密码');
        }
        if(inputValue1!==""&&pwd==='123456'){
        confirm({
          title: '是否立即修改密码?',
          content: '不能使用初始密码',
          okText:"确认",
          cancelText:"取消",
          onOk() {
            This.setState({
                RedirectModify:true
              })
          },
          onCancel() {},
        });
        }
        if(this.state.inputValue1==='admin'&&this.state.pwd==='eisoo'){
            This.setState({
                RedirectTabs:true
            })
        }        
    }

    handleNameChange(e){
        const value = e.target.value;
        this.setState({
            inputValue1: value
        })
      
    }

    handlePasswordChange(e){
        const value = e.target.value;
        this.setState({
            pwd: value
        })
    }
}
export default Login;